// define the namespace
syslib.namespace("syslib.ui");

// create the tag conversor
syslib.ui.PanelTag = __class(syslib.ui.TagConversor, {
	component : null,  

	execute : function(){
		// create the panel
		var component = new syslib.ui.Panel(this.__attributes);
		
		// append
		component.appendTo(this.__container);
		
		// store the component
		this.component = component;
	}, 
	
	getComponent : function(){
		return this.component;
	}
});

syslib.ui.Panel = __class(syslib.ui.UIComponent, {
	__options : {},
	__panelBody : null, 
	
	__construct : function(options){
		// load the style
		syslib.loadStyleForComponent("panel");
		
		// format the options
		this.__options = __extend({
			id : syslib.element.generateID(), 
			title : false, 
			style : "", 
			bodyStyle : "", 
			content : ""
		}, options);
	}, 
	
	__createElement : function(){
		// create the panel
		var panel = document.createElement("div");
		
		// set the panel data
		panel.id = this.__options.id;
		panel.className = "syslib-panel-container syslib-border-radius";
		panel.style.cssText = this.__options.style;
		
		// check if the title is valid
		if(this.__options.title){
			// create the title
			var panelTitle = document.createElement("div");
			
			// set the title data
			panelTitle.className = "syslib-panel-header syslib-3d-background syslib-bottom-border syslib-title-text";
			panelTitle.innerHTML = this.__options.title;
			
			// append
			panel.appendChild(panelTitle);
		}
		
		// create the body
		var panelBody = document.createElement("div");
		
		// set the body data
		panelBody.className = "syslib-panel-body syslib-text";
		panelBody.innerHTML = this.__options.content;
		panelBody.style.cssText = this.__options.bodyStyle;
		
		// store the panel body
		this.__panelBody = panelBody;
		
		// append
		panel.appendChild(panelBody);
		
		// set the private attribute
		this.__element = panel;
		
		// return
		return this.__element;
	}, 
	
	appendChild : function(child){
		this.__panelBody.appendChild(child);
	}
});